<template>
	
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add"/>
	</div>
	
</template>

<script>

	export default {
		name: 'AddJob',
		props: ['addJob'],
		data() {
			return {
				initId: 1
			}
		},
		methods:{
			// AddJob组件新增job时，调用App给的addJob方法，从而操作App里的job列表
			add(event){
				// 获取value值并去除首尾空格
				let jobName = event.target.value.trim()
				if(!jobName){
					event.target.value = ''
					return
				}
				let job = {
					id: this.initId++,
					name: jobName,
					finish: false,
				}
				this.addJob(job)
				event.target.value = ''
			}
		}
	}
</script>

<style scoped>
	/*header*/
	.todo-header input {
	  width: 560px;
	  height: 28px;
	  font-size: 14px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  padding: 4px 7px;
	}
	
	.todo-header input:focus {
	  outline: none;
	  border-color: rgba(82, 168, 236, 0.8);
	  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>